<template>
  <div>
    <swipe class="swipe">
      <swipe-item class="slide1" v-for="(swiper, index) in swipers" :key="index">
        <a :href="swiper.url">
          <img :src="swiper.image" :title="swiper.title">
        </a>
      </swipe-item>
    </swipe>
    <div class="menu">
      <router-link class="link" :to="menu.link" v-for="(menu, index) in menus" :key="index">
        <div>
          <img :src="menu.img">
        </div>
        <div class="title">
          <p>{{menu.title}}</p>
        </div>
      </router-link>
    </div>
    <div class="recommend">
      <section class="title">
        <h2 class="caption-left-cursor hairlines-bottom">
          推荐商家
        </h2>
      </section>
      <business-lists :datas="businessLists" :end="businessListsEnd" :isLoading="isLoading"></business-lists>
    </div>
    <nav-tem :activeIndex="activeIndex"></nav-tem>
  </div>
</template>

<script>
  import 'vue-swipe/dist/vue-swipe.css'
  import Nav from '@/components/index/nav'
  import BusinessLists from '@/components/business-lists/lists'
  import { Swipe, SwipeItem } from 'vue-swipe'
  import menu1 from './img/menu1.png'
  import menu2 from './img/menu2.png'
  import menu3 from './img/menu3.png'
  import menu4 from './img/menu4.png'
  
  export default {
    name: 'index',
    components: {
      'swipe': Swipe,
      'swipe-item': SwipeItem,
      'nav-tem': Nav,
      'business-lists': BusinessLists
    },
    data () {
      return {
        title: '爱尚丰',
        activeIndex: 0,
        isLoading: false,
        businessListsEnd: false,
        menus: [
          {img: menu1, title: '认证中心', link: '/profile/manage'},
          {img: menu2, title: '我的订单', link: '/mine/order'},
          {img: menu3, title: '我的丰期', link: '/mine/bill'},
          {img: menu4, title: '常见问题', link: '/mine/help'}
        ]
      }
    },
    computed: {
      swipers () {
        return this.$store.state.swipers
      },
      businessLists () {
        return this.$store.state.indexBusinessLists
      }
    },
    created () {
      this.setTitle(this.title)
    },
    mounted () {
      // 请求定位，更新数据
      if (!this.$store.state.lat) {
        this.api.location(() => {
          this.isLoading = true
          this.api.getBusinessLists((result) => {
            this.$store.commit('cacheIndexBusinessLists', result.recommend_list)
            this.isLoading = false
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .swipe{
    margin-bottom: rem(16);
    height: rem(460);
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .menu{
    margin-bottom: rem(16);
    display: flex;
    padding: rem(38) rem(24) rem(28);
    background: #fff;     
    .link{
      width: 25%;
      img{
        display: block;
        margin: 0 auto;
        width: rem(80);
        height: rem(80);
      }
      .title{
        margin-top: rem(15);
        font-size: rem(28);
        color: #666;
        text-align: center;
      }
    }
  }
  .recommend{
    .title{
      padding: 0 rem(24);
      background: #fff;
    }
  }
</style>

